<template>
  <div class="container1" :class="{ print: type == '打印' }">
    <DocHeader
      ref="pressureApplicationRef"
      fromDoc="pressureApplication"
      mainDiagnosis
      :title="title"
    >
    </DocHeader>
    <div class="content">
      <div
        class="flex"
        style="white-space: nowrap; justify-content: space-between"
      >
        <div class="flex">
          <div>填表日期：</div>
          <DatePicker
            v-model="pageData.date"
            select-interval
            value-format="timestamp"
            format="yyyy-MM-dd"
            clearable
          />
        </div>
        <div class="flex">
          <div class="ml-40p">填表人：</div>
          <input v-model="pageData.createBy" />
        </div>
      </div>
      <div class="f-b p-5-0 tac bort borl borr">Braden Scale 评分</div>
      <div class="flex bort borl borr">
        <div class="flex flex-12">
          <div class="flex-1 p-5-0 tac borr">评分项目</div>
          <div class="flex-8 borr">
            <div class="p-5-0 tac">评分及依据</div>
            <div class="flex bort">
              <div class="flex-1 p-5-0 tac borr">1分</div>
              <div class="flex-1 p-5-0 tac borr">2分</div>
              <div class="flex-1 p-5-0 tac borr">3分</div>
              <div class="flex-1 p-5-0 tac">4分</div>
            </div>
          </div>
          <div class="flex-3 p-5-0 tac borr">分值（分）</div>
        </div>
        <div class="flex-3 p-5-0 tac">评分结果（分）</div>
      </div>
      <div class="flex bort borl borr">
        <div class="flex-12">
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr">感觉</div>
            <div class="flex-2 p-5-0 tac borr">完全丧失</div>
            <div class="flex-2 p-5-0 tac borr">严重丧失</div>
            <div class="flex-2 p-5-0 tac borr">轻度丧失</div>
            <div class="flex-2 p-5-0 tac borr">未受损害</div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj1" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
          <div class="flex bort">
            <div class="flex-1 p-5-0 tac borr">潮湿</div>
            <div class="flex-2 p-5-0 tac borr">持久潮湿</div>
            <div class="flex-2 p-5-0 tac borr">十分潮湿</div>
            <div class="flex-2 p-5-0 tac borr">偶尔潮湿</div>
            <div class="flex-2 p-5-0 tac borr">很少潮湿</div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj2" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
          <div class="flex bort">
            <div class="flex-1 p-5-0 tac borr">活动状况</div>
            <div class="flex-2 p-5-0 tac borr">卧床不起</div>
            <div class="flex-2 p-5-0 tac borr">局限于坐</div>
            <div class="flex-2 p-5-0 tac borr">扶助行走</div>
            <div class="flex-2 p-5-0 tac borr">活动自如</div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj3" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
          <div class="flex bort">
            <div class="flex-1 p-5-0 tac borr">行动能力</div>
            <div class="flex-2 p-5-0 tac borr">完全不能</div>
            <div class="flex-2 p-5-0 tac borr">严重限制</div>
            <div class="flex-2 p-5-0 tac borr">轻度限制</div>
            <div class="flex-2 p-5-0 tac borr">不受限制</div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj4" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
          <div class="flex bort">
            <div class="flex-1 p-5-0 tac borr">营养状态</div>
            <div class="flex-2 p-5-0 tac borr">非常差</div>
            <div class="flex-2 p-5-0 tac borr">可能不足</div>
            <div class="flex-2 p-5-0 tac borr">足够</div>
            <div class="flex-2 p-5-0 tac borr">非常好</div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj5" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
          <div class="flex bort">
            <div class="flex-1 p-5-0 tac borr f-12">摩擦和剪切力</div>
            <div class="flex-2 p-5-0 tac borr">有</div>
            <div class="flex-2 p-5-0 tac borr">有潜在危险</div>
            <div class="flex-2 p-5-0 tac borr">无</div>
            <div class="flex-2 p-5-0 tac borr"></div>
            <div class="flex-3 p-5-0 tac borr">
              <input v-model="pageData.pj6" class="w-100p p-3-2 m-0 txt-c" />
            </div>
          </div>
        </div>
        <div class="flex-3 p-5-0 tac">
          <input
            v-model="pageData.sum"
            type="textarea"
            class="w-100p h-100p txt-c p-3-2 m-0"
          />
        </div>
      </div>
      <div class="flex bort borl borr">
        <div class="flex-9">
          <div>
            <div class="p-5-0 f-b tac">皮肤情况</div>
            <div class="flex bort">
              <div class="flex-1 p-5-0 tac borr">完整</div>
              <div class="flex-2 borr">
                <div class="p-5-0 tac">发生来源</div>
                <div class="flex bort">
                  <div class="flex-1 p-5-0 tac borr">院外</div>
                  <div class="flex-1 p-5-0 tac">院内</div>
                </div>
              </div>
              <div class="flex-2 p-5-0 tac borr">部位</div>
              <div class="flex-2 p-5-0 tac borr">面积</div>
              <div class="flex-2 flex">
                <div class="flex-1 p-5-0 tac borr">分期</div>
                <div class="flex-1 p-5-0 tac">其他</div>
              </div>
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf1_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf1_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf1_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf1_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf1_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf1_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf2_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf2_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf2_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf2_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf2_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf2_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf3_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf3_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf3_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf3_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf3_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf3_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf4_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf4_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf4_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf4_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf4_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf4_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf5_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf5_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf5_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf5_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf5_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf5_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex">
            <div class="flex-1 p-5-0 tac borr bort">
              <input v-model="pageData.pf6_1" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex flex-2 borr bort">
              <div class="flex-1 p-5-0 tac borr">
                <input v-model="pageData.pf6_2" class="w-100p p-3-2 m-0" />
              </div>
              <div class="flex-1 p-5-0 tac">
                <input v-model="pageData.pf6_3" class="w-100p p-3-2 m-0" />
              </div>
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf6_4" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 p-5-0 tac borr bort">
              <input v-model="pageData.pf6_5" class="w-100p p-3-2 m-0" />
            </div>
            <div class="flex-2 flex bort">
              <input v-model="pageData.pf6_6" class="w-100p p-3-2 m-0" />
            </div>
          </div>
          <div class="flex p-3-2 bort pl-4">治疗护理措施：</div>
          <textarea
            v-model="pageData.measure"
            type="textarea"
            class="w-100p h-112 p-3-2 m-0"
          />
        </div>
        <div class="flex-6 p-5-0 borl">
          <div class="ml-4">病房讨论意见：</div>
          <textarea
            v-model="pageData.opinion"
            type="textarea"
            class="w-100p h-365 p-3-2 m-0"
          />
          <div class="flex bort">
            <div class="ml-4 p-3-2">护士长签名：</div>
            <img
              v-if="signPhoto(pageData.sign, 'nursingDocument', docType)"
              :src="
                'data:image/png;base64,' +
                signPhoto(pageData.sign, 'nursingDocument', docType)
              "
              alt=""
              style="display: block; max-width: 98%; height: 24px"
              @click="handleSignImgClear"
            />
            <input
              v-else
              v-model="pageData.sign"
              class="w-100p flex-1 p-3-2 m-0"
              @blur="handleSignInputBlur"
            />
          </div>
        </div>
      </div>
      <div class="borb"></div>
    </div>
  </div>
</template>
<script>
import { cloneDeep } from 'lodash-unified'
import {
  computed,
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  watch
} from 'vue'

import DatePicker from '@/components/MyComp/DatePicker.vue'
import { useSign } from '@/hooks'

import DocHeader from '../DocHeader.vue'
import { baseData1 } from './baseData.js'

export default defineComponent({
  components: {
    DocHeader,
    DatePicker
  },
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    title: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    docType: {
      type: [String, Number],
      default: ''
    }
  },
  setup(props) {
    const state = reactive({
      pageData: {
        tableData: []
      },
      pressureApplicationRef: {}
    })

    const { signPhoto, queryUserSignByName } = useSign()

    function initData() {
      if (props.data.jsonText && props.data.jsonText !== '{}') {
        const jsonText = JSON.parse(props.data.jsonText)
        state.pageData = Object.assign(
          cloneDeep(baseData1),
          jsonText.form1.pageData
        )
        state.pressureApplicationRef.setZd(jsonText.form1.editZd)
      } else {
        nextTick(() => {
          state.pageData = cloneDeep(baseData1)
        })
      }
    }

    function getParams() {
      return {
        pageData: state.pageData,
        editZd: state.pressureApplicationRef.editZd
      }
    }

    function handleSignInputBlur() {
      queryUserSignByName(
        [state.pageData.sign],
        'nursingDocument',
        props.docType
      )
    }

    function handleSignImgClear() {
      state.pageData.sign = ''
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      signPhoto,
      getParams,
      handleSignInputBlur,
      handleSignImgClear
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
@import '@/views/doc/styles/doc-fix.scss';
$border: 1px solid #000;

::v-deep .el-checkbox {
  display: block;
  margin-right: 0;
  padding: 12px 5px;
}

.mt-6 {
  margin-top: 6px;
}

.p-12-5 {
  padding: 12px 5px;
}

.f-b {
  font-weight: bold;
}

.f-12 {
  font-size: 12px;
}

.h-100p {
  height: 100%;
}

.h-112 {
  height: 100px;
}

.h-365 {
  height: 320px;
}

.container1 {
  padding: 20px 0 0;
  height: 840px;
  // margin: getpx(30) auto 0;
  // width: calc(100% - 66px);
  font-family: SiYuanSong-Medium;
  text-align: start;

  span {
    font-size: 14px;
  }

  .print-span {
    display: inline-block;
    font-size: 12px;
    border-bottom: 1px solid;
    vertical-align: text-bottom;
    word-break: break-all;
  }

  input {
    background: transparent !important;
  }

  textarea {
    background: transparent !important;
  }
}

.bor-t-box {
  margin-bottom: 10px;
  width: 100%;
  border-top: 1px solid #000;
}

.mt {
  &-3 {
    margin-top: 3px;
  }
}

.ml {
  &-30 {
    margin-left: 30px;
  }

  &-38 {
    margin-left: 38px;
  }

  &-42 {
    margin-left: 42px;
  }

  &-50 {
    margin-left: 50px;
  }

  &-60 {
    margin-left: 60px;
  }

  &-70 {
    margin-left: 70px;
  }

  &-73 {
    margin-left: 73px;
  }

  &-84 {
    margin-left: 84px;
  }

  &-240 {
    margin-left: 240px;
  }

  &-40p {
    margin-left: 40%;
  }
}

.mb {
  &-3 {
    margin-bottom: 3px;
  }

  &-10 {
    margin-bottom: 10px;
  }
}

.mr {
  &-10 {
    margin-right: 10px;
  }

  &-15 {
    margin-right: 15px;
  }

  &-20 {
    margin-right: 20px;
  }
}

.m-0 {
  margin: 0;
}

.ml--1 {
  margin-left: -1px;
}

.ml-4 {
  margin-left: 4px;
}

.pl-4 {
  padding-left: 4px;
}

.m-0-2 {
  margin: 0 2px;
}

.p-2 {
  padding: 2px;
}

.p-3-2 {
  padding: 3px 2px;
}

.p-5-0 {
  padding: 3px 0;
}

.p-10-0 {
  padding: 10px 0;
}

.txt-c {
  text-align: center;

  input {
    text-align: center;
  }
}

.w-1 {
  width: 75px;
}

.w-2 {
  width: 260px;
}

.w-3 {
  width: 89px;
}

.w-4 {
  width: 90px !important;

  :deep {
    .el-input {
      width: 90px;
    }
  }
}

.w-5 {
  width: 76px !important;

  :deep {
    .el-input {
      width: 76px;
    }
  }
}

.w-6 {
  width: 66px;
}

.w-7 {
  width: 100px;
}

.w-8 {
  width: 14px;
}

.w-9 {
  width: 74px;

  :deep {
    .el-input {
      width: 74px;
    }
  }
}

.w-10 {
  width: 25px;
}

.w-11 {
  width: 116px;
}

.w-12 {
  width: 60px;
}

.w-13 {
  width: 127px;
}

.relative {
  position: relative;
}

input {
  font-size: 14px;
}

textarea {
  border: none;
  outline: none;
  resize: none;
}

.flex-end {
  justify-content: flex-end;
}

.inline-block {
  display: inline-block;
}

::v-deep {
  .textarea {
    flex: 1;
    margin-left: 5px;

    .el-textarea__inner {
      padding: 0;
      font-size: 14px;
      color: #000;
      border: none;
      line-height: 1.15;
      resize: none;
      word-break: break-all;
    }
  }

  .el-cascader__tags {
    width: 100%;
    transform: translateY(-61%);

    .el-tag {
      max-width: 60%;
    }
  }

  .el-date-editor {
    padding: 2px;
    width: 100px;

    .el-input__inner {
      font-size: 14px;
    }

    .el-input__suffix {
      display: inline-block;
    }
  }

  .el-select,
  .el-autocomplete {
    margin: 4px 2px;
    border-bottom: 1px solid;

    .el-input__suffix {
      display: inline-block;
      right: -6px;
      top: -3px;

      .el-icon-arrow-up {
        display: none;
      }

      .el-icon-circle-close {
        color: red;
      }
    }

    .el-input__inner {
      text-align: center;
      height: 15px;
      line-height: 15px;
    }
  }

  .el-cascader {
    border-bottom: 1px solid;
    line-height: 15px;
  }

  .el-cascader__search-input {
    height: 15px;
  }

  .el-input .el-input__inner {
    height: 15px !important;
    font-size: 12px;
  }

  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
  }

  input:disabled {
    color: #000;
    background: #fff;
  }

  .el-cascader__search-input {
    margin-left: 0;
  }
}

.img {
  width: 20px;
  vertical-align: sub;
  cursor: pointer;

  &.add {
    margin: 5px 10px 0 0;
  }

  &:not(.add) {
    position: absolute;
    right: -20px;
    top: 3px;
  }
}

.print {
  ::v-deep {
    .el-select {
      padding-bottom: 1px;
      transform: translateY(-1px);
    }
  }

  .container1 {
    .print-spans {
      padding-bottom: 1px;
      transform: translateY(1px);
    }
  }

  input {
    padding-bottom: 1px;
    line-height: 14px;
  }
}
$border: 1px solid #000;

.container {
  padding-top: getpx(50);
  // margin: getpx(30) auto 0;
  // width: calc(100% - 40px);
  font-family: SiYuanSong-Medium;
  text-align: start;
}

.content {
  margin-top: 10px;
}

.inputStyle {
  // font-size: 10px;
  border: none;
  background-color: rgba($color: #000, $alpha: 0%);
  outline: none;
  width: 90%;
  height: 100%;
}

.w40 {
  width: 40px;
}

.w60 {
  width: 60px;
}

.flex {
  display: flex;
}

.tac {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sta {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.flex {
  @for $i from 1 through 30 {
    &-#{$i} {
      flex: $i;
    }
  }
}

.mb8 {
  margin-bottom: 8px;
}

.borr {
  border-right: 1px solid #000;
}

.bort {
  border-top: 1px solid #000;
}

.borl {
  border-left: 1px solid #000;
}

.borb {
  border-bottom: 1px solid #000;
}

.pad10 {
  padding: 10px;
}

.pad5 {
  padding: 5px;
}

.h30 {
  height: 38px;
}

.grid-box1 {
  display: grid;
  grid-template-columns: 7.8% 7.8% 7.8% 7.8% 7.8% 7.8% 38% auto;
}

.grid-box2 {
  display: grid;
  grid-template-columns: 15.6% 15.6% 15.6% 38% auto;
}
</style>
